<template>
  <div class="list-container">
    <!-- 月劳务发放 -->
    <el-form class="search-panel" v-model="searchData" :inline="true">
      <el-form-item
        label-width="120px"
        class="search-time"
        label="操作时间："
        prop="searchData.oper_time"
      >
        <el-date-picker
          v-model="searchData.oper_time"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label-width="90px" class="search-input" label="操作人" prop="oper_name" >
                <el-input v-model="searchData.oper_name" placeholder="操作人"></el-input>
            </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <!-- <el-tag>项目方</el-tag> -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          type="index"
          label="序号"
          width="60"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="title" label="标题" align="center">
        </el-table-column>
        <el-table-column prop="operTime" label="操作时间" align="center">
        </el-table-column>
        <el-table-column prop="operName" label="操作人" align="center">
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(total / searchData.pageSize) }}页/{{ total }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchData.currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="searchData.pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import {getOperLogList} from "@/api/log"
export default {
  data() {
    return {
      searchData: {
        pageSize: 10,
        currentPage: 1,
        oper_time: null,
        oper_name: "",
      },
      tableData: [{ attendanceTime: "2021年10月" }],
      total: 0,
    };
  },
  methods: {
    getOperLogList() {
      getOperLogList(this.searchData).then(res=>{
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        console.log(this.tableData);
      })
    },
    onSubmit() {
      this.searchData.pageSize = 10
      this.searchData.currentPage = 1
      this.getOperLogList()
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.getOperLogList()
    },
    handleCurrentChange(val) {
      this.searchData.currentPage = val
      this.getOperLogList()
    },
  },
  mounted(){
    this.getOperLogList()
  }
};
</script>
